@import "../base"


.GameItemDetailChange
  display: block

  .gameItemCard
    display: flex
    flex-direction: row
    align-items: center
    text-align: center

    .is_game_disable
      border-radius: 10px
      padding: 5px
      height: 70px
      width: 60px
      line-height: 70px


    .to_change_span
      height: 70px
      line-height: 70px
      border-radius: 10px
      padding: 5px
      background: #8fc7c9

      &:hover
        background: #246469
$right_padding: 14px

.game_detail_change
  .op_bar
    display: flex
    flex-direction: row

    .is_game_disable
      background: #d97373
      border-radius: 10px
      height: 70px
      line-height: 70px
      display: block
      text-align: center
      width: 10%

    .update_game_details
      background: #61ce80
      text-align: center
      font-size: 20px
      line-height: 70px
      border-radius: 10px
      width: 90%

      &:hover
        background: #b74b4b

  .confirmationUpdate
    position: fixed
    display: flex
    flex-direction: row
    background: #ababab
    width: 80%
    height: 10%
    z-index: 2
    font-size: 40px
    align-items: center
    text-transform: uppercase

    .cancel
      background: #36a132
      margin-right: auto
      padding: 20px

      &:hover
        background: #1cef17

    .confirm
      background: #a15757
      margin-left: auto
      padding: 20px

      &:hover
        background: #ff2828


  .game_flex_column
    color: #ffffff
    background: #303638
    display: flex
    width: 100%
    justify-content: center
    flex-direction: column
    align-items: center

  .game_header
    justify-content: center
    display: flex
    flex-direction: row
    background: linear-gradient(70deg, #1f1f1f, #192a41)
    align-items: center

    .game_id
      width: 20px
      margin-bottom: 170px

    .game_name
      text-align: center
      padding: 20px
      font-size: 30px
      color: #ffffff
      width: 30%


    .change_input
      display: block

      img
        width: 300px

    .game_header_column
      display: flex
      flex-direction: column
      padding: 20px
      width: 50%
      justify-content: stretch

      .game_header_short
        margin-bottom: 20px
        font-size: $font_size *0.9
        color: #dedede

      .game_header_info
        color: #67c1f5
        margin: 1px

        label
          color: #67c1f5
          float: right


  .game_user_op
    width: 100%
    display: flex
    flex-direction: column
    align-items: center

    .game_movie
      padding-top: 10px
      display: block
      background: linear-gradient(90deg, #171c1c 50%, #171818 95%)

    .game_price
      display: flex
      flex-direction: column
      width: 100%
      background: linear-gradient(81deg, #383d3d 30%, #090808 70%)

      .game_name
        padding: 10px

        a
          color: #c7e3ff
          padding: 20px
          font-size: 30px
          min-width: 300px

      .game_own_state
        display: flex
        flex-direction: row
        justify-content: space-between
        align-items: center

        .game_purchase_discount
          display: flex
          flex-direction: row
          align-items: center
          justify-content: flex-end
          padding: 5px
          margin-left: auto

        .game_purchase_discount_bg
          margin-right: 10px
          margin-bottom: 10px
          display: flex
          flex-direction: row
          align-items: center
          font-size: $font_size * 2
          box-shadow: 2px 2px 10px 10px rgb(52, 52, 52)
          transition-duration: 1s

          &:hover
            box-shadow: 2px 2px 10px 10px rgb(88, 151, 183)

          .discount_pct
            color: #BEEE11
            background: #4c6b22
            font-weight: bold
            height: 50px
            padding: 0 0 0 10px

          .discount_free
            color: #BEEE11
            background: #4c6b22
            font-weight: bold
            height: 50px
            text-transform: uppercase
            padding: 0 0 0 10px

          .discount_prices
            padding: 0 10px 0 10px
            color: #BEEE11
            background: #738895
            position: relative
            display: flex
            flex-direction: row
            font-size: $font_size *1.2
            height: 50px

            input
              width: 100px

            .game_price_final
              padding-top: 5px
              color: #BEEE11
              line-height: 16px

            .game_price_init
              width: fit-content
              color: #a4bac7
              left: auto
              font-size: $font_size *1


        .discount_free
          font-size: $font_size *2
          padding-top: 8px
          padding-left: 12px
          padding-right: 12px

  .game_page_content
    font-size: $font_size
    display: flex
    flex-direction: row
    justify-content: space-between
    background: rgb(47, 47, 47)

    .title
      font-size: $font_size *1.5
      color: #e7e7e7
      padding: 10px

    .game_about_the_game
      width: 40%
      color: #b0b0b0
      background: #2a2a2a
      padding: 20px

      a
        color: #58acb0

      img
        max-width: 250px
        float: left
        padding: 10px


    .game_content_center
      width: 30%
      background: #1a1a1a

      .legal_notice
        color: #585e62
        padding: 20px
        font-size: $font_size * 0.7

      .game_reviews
        color: #929ea6
        background: #232323
        padding: 20px
        font-size: $font_size

        a
          color: #7a8aaf


    .game_content_right
      width: 30%
      display: flex
      flex-direction: column
      align-content: space-around

      .game_languages

        padding: $right_padding
        float: right
        display: flex
        flex-direction: column
        background: #252525

        table
          color: #8f98a0
          font-size: $font_size * 0.9

          tr

            &:nth-child(2n+1)
              background: #2d2d2d

            th
              padding: 2px

            td
              border-bottom: 1px solid #575757

              &:empty
                border-bottom: 1px solid #252525

              span
                width: 100%
                height: 100%
                display: inline-table
                text-align: center
                float: left

                font-size: $font_size

                color: #67c1f5


      .achievements
        .achievement_img
          display: flex
          flex-direction: row
          flex-wrap: wrap

          img
            width: 50px
            padding: 0 0 10px 10px

  .game_genres
    background: #565656
    color: #66c0f4

  input[type='text']
    height: 40px
    width: 300px
    // 背景透明
    border: 4px solid #14a5b2
    text-indent: 20px
    transition: 0.3s
    outline: none


  input[type='text']:hover
    // 鼠标经过输入框时,更改border颜色
    border-color: #42b983


  input[type='text']:focus
    // 鼠标聚焦焦点时
    border-color: #f1190d


  input[type='text']::-webkit-input-placeholder
    // 实现该效果主要在这里
    transition: 0.5s
    // 过度0.5s
    font-size: 14px
    // 字体变为14px
    transform-origin: top left
  // 属性允许您改变被转换元素的位置,从上到左,x轴水平方向top,y轴垂直方向left


  input[type='text']:focus::-webkit-input-placeholder
    transform: scale(0.8) translateY(-10px)
